<template>
	<view class="gongao_icon_box">
		<view class="icon_box">
			<view class="cela" :class="item.paper_class" v-for="(item,index) in stats" :key="index">
				<text>{{item.paper_title}}</text>
				<view class="jiacu_text consola_Coolc">{{item.paper_value}}</view>
			</view>
		</view>
		
		<u-notice-bar @click="noticeLink" :text="noticeList" type="none"></u-notice-bar>

	</view>
</template>

<script>
	export default {
		props: ['stats', 'noticeList'],
		methods: {
			noticeLink() {
				console.log('noticeLink')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.gongao_icon_box {
		width: 694rpx;
		height: 200rpx;
		background: #ffffff;
		border-radius: 20rpx;
		z-index: 99;
		margin-top: -60rpx;
		position: absolute;
		left: 28rpx;
		box-shadow: 0 0 5px #dedede;

		.icon_box {
			width: 694rpx;
			justify-content: space-around;
			display: flex;
			border-bottom: 1px solid #eeeeee;
			align-items: center;
			padding: 20rpx;

			.cela {
				width: 220rpx;
				height: 84rpx;
				padding-left: 92rpx;
				text-align: left;
				background-repeat: no-repeat;
				background-size: 84rpx 84rpx;
				background-position: 0 top;
				box-sizing: border-box;

				text {
					color: #999999;
					font-size: 24rpx;
				}

				.jiacu_text {
					font-size: 32rpx;
					font-weight: bolder;
					color: #000000;
				}
			}

			.icon_cel_1 {
				background-image: url(~@/static/coolc/i-t-1.png);
			}

			.icon_cel_2 {
				background-image: url(~@/static/coolc/i-t-2.png);
			}

			.icon_cel_3 {
				background-image: url(~@/static/coolc/i-t-3.png);
			}
		}
	}
</style>